<template>
    <div class="all">
        <a-row class="all-row">
            <a-col span="10" class="left_col">
                <div class="left">
                    <div class="left_top_and_middle">
                        <div class="left_top">输入参数</div>
                        <div class="left_middle">
                            <div class="left_middle_top"><!--该div防止在使用定位导致后导致页面塌陷-->
                                <div class="left_middle_top2">
                                    <div class="left_middle_top_left">
                                        <ul class="parameter_list_name">
                                            <li>时间选择列数</li>
                                            <li>角速度选择列数</li>
                                            <li>载荷选择列数</li>
                                            <li>角速度生成方式</li>
                                            <li>角速度单位</li>
                                            <li>载荷间隔值</li>
                                            <li>持续谱最大间隔份数</li>
                                            <li>持续谱最小间隔份数</li>
                                        </ul>
                                    </div>
                                    <div class="left_middle_top_right">
                                        <ul class="parameter_list_input">
                                            <li><input v-model="form.time_column"/></li>
                                            <li><input v-model="form.rotor_column"/></li>
                                            <li><input v-model="form.load_column"/></li>
                                            <li>
                                                <select v-model="form.select_rotor">
                                                    <option value="1">当前时刻角速度</option>
                                                    <option value ="2">后一时刻角速度</option>
                                                    <option value ="3">平均角速度</option>
                                                </select>
                                            </li>
                                            <li>
                                                <select v-model="form.speed_unit">
                                                    <option value ="1">rad/s</option>
                                                    <option value ="2">rad/min</option>
                                                </select>
                                            </li>
                                            <li><input v-model="form.space_input"/></li>
                                            <li><input v-model="form.max_segment"/></li>
                                            <li><input v-model="form.min_segment"/></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="left_middle_bottom">
                                <p>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="left_bottom">
                        <div class="left_button">
                            <button @click="calculation">持续计数处理</button>
                            <button @click="clear">清除持续谱</button>
                        </div>
                    </div>
                </div>
            </a-col>
            <a-col span="14" class="right_col" >
                <div class="right">
                    <div class="right_top">输出参数</div>
                    <div class="right_middle">
                        <div class="right_middle_table">
                            <table style="width: 100%;height: 20%;background: #D7D7D7">
                                <thead>
                                    <tr class="table_title">
                                        <th style="border-right: 1px grey solid">载荷</th>
                                        <th style="border-right: 1px grey solid">循环圈数</th>
                                        <th style="border-right: 1px grey solid">平均转速(rpm)</th>
                                        <th>持续时间(s)</th>
                                    </tr>
                                </thead>
                            </table>
                            <div style="width: 102.6%;height: 80%;overflow-y: scroll">
                            <table style="width: 100%;height: 20%;border-bottom: 1px solid grey">
                                <tbody class="table_body">
                                   <tr style="border-top: 1px grey solid" v-for="(table_data,index) in table_datas" :key="index">
                                       <td style="border-right: 1px grey solid">{{table_data[0]}}</td>
                                       <td style="border-right: 1px grey solid">{{table_data[1]}}</td>
                                       <td style="border-right: 1px grey solid">{{table_data[2]}}</td>
                                       <td>{{table_data[3]}}</td>
                                   </tr>
                                </tbody>
                            </table>
                            </div>
                        </div>
                    </div>
                    <div class="right_bottom">注意:所有选项的单位均与载荷文件中的单位相同</div>
                </div>
            </a-col>
        </a-row>

    </div>
</template>

<script>
    import {LDD_matrix_deal} from "../../api/file";
    export default {
        name: "LDD_matrix_deal",
        created() {
            document.title='载荷谱持续计数处理'
          this.$store.state.file.key=2
        },
        data(){
            return{
                //一般这里是要封装在一个对象里面的，
                form:this.$store.state.file.dataList[2],
                table_datas:[[]]
            };
        },
        methods:{
            calculation(){
                //这个括号里面可以传参，一般就是传你this.form的内容
                LDD_matrix_deal(this.form)
                    .then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
                        console.log(res);
                        //你也可以不检验，这个状态码一般是检验后端数据有没有异常，res就是返回结果的整个大的对象
                            console.log(res);
                            //然后再把这里面的数据放到你绑定的对象动态改变值即可
                            this.table_datas=res;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            clear()
            {
                this.table_datas=[];
            }
        }
    }
</script>

<style scoped>
    /*整个页面*/
    .all
    {
        height: 100%;
        width: 100%;
        color: #333333;
    }
    .all-row
    {
        height: 100%;
        width: 100%;
    }
    /*左半部分*/
    .left_col
    {
        height: 100%;
        position: relative;
    }
    .left
    {
        height: 90%;
        width: 90%;
        position: absolute;
        top: 5%;
        left: 5%;
    }
    .left_top_and_middle
    {
        width: 100%;
        height: 85%;
        box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    }
    .left_top
    {
        width: 100%;
        height: 5%;
        background-color: rgba(215, 215, 215, 1);
        font-size: 18px;
    }
    .left_middle
    {
        width: 100%;
        height: 80%;
    }
    .left_bottom
    {
        width: 100%;
        height: 15%;
    }
    .left_middle_top
    {
        width: 100%;
        height: 70%;
    }
    .left_middle_top2
    {
        height: 100%;
        width: 100%;
        position: relative;
    }
    .left_middle_top_left
    {
        height: 100%;
        width: 60%;
        position: absolute;
        left: 0;
    }
    .left_middle_top_right
    {
        height: 100%;
        width: 40%;
        position: absolute;
        right: 0;
    }
    .parameter_list_name
    {
        margin-top: 12%;
        margin-right: 10%;
        text-align: right;
    }
    .parameter_list_name li,.parameter_list_input li
    {
        margin-top: 5px;
        font-size: 18px;
    }
    .parameter_list_input
    {
        margin-top: 14%;
        margin-left: 10%;
        text-align: left;
    }
    .parameter_list_input input
    {
        width: 50%;
        height: 28px;
    }
    .parameter_list_input select
    {
        width: 70%;
        height: 28px;
    }
    .left_middle_bottom
    {
        width: 100%;
        height: 30%;
    }
    .left_middle_bottom p
    {
        margin-top: 10%;
        margin-left: 5%;
        margin-right: 10%;
        font-size: 13px;
    }
    .left_bottom
    {
        position: relative;
    }
    .left_button
    {
        width: 90%;
        height: 50%;
        position: absolute;
        top:20%;
        left:10%;
        text-align: center;
    }
    .left_button button
    {
        height: 100%;
        width: 30%;
        margin-right: 20%;
        font-size: 18px;
        border-radius: 5px;
        text-align: center;
        color: #333333;
    }
    /*右半部分*/
    .right_col
    {
        height: 100%;
        position: relative;
    }
    .right
    {
        height: 90%;
        width: 90%;
        position: absolute;
        top: 5%;
        left: 5%;
        box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    }
    .right_top
    {
        width: 100%;
        height: 4.5%;
        background-color: rgba(215, 215, 215, 1);
        font-size: 18px;
    }
    .right_middle
    {
        width: 100%;
        height: 80%;
        position: relative;
    }
    .right_middle_table
    {
        width: 80%;
        height: 85%;
        position: absolute;
        top: 10%;
        left: 10%;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
    }
    .table_title
    {
        height:100%;
        width: 100%;
    }
    .table_title th
    {
        width: 25%;
        height: 100%;
        text-align: center;
    }
    .table_body tr:nth-child(odd)  {
        background-color:#ffffff;
    }

    .table_body  tr:nth-child(even){
        background-color:#f1f1f1;
    }
    .table_body
    {
        width: 100%;
        height: 40%;
    }
    .table_body tr
    {
        height: 40%;
        text-align: center;
    }
    .table_body td
    {
        width: 25%;
        height: 100%;
    }
    .right_bottom
    {
        width: 100%;
        height: 15%;
        margin-top: 5%;
        font-size: 18px;
        margin-left: 10%;
    }

</style>